<template>
  <div class="container" v-if="data">
     <div class="focus" v-for="item in data.list" :key="item.id">
       <div class="left" @click="$router.push({name: 'User', params: { user_id: `${item.follerd_id}` }})">
          <el-avatar :size="65" :src="item.focus.avatar"></el-avatar>
       </div>
       <div class="center">
         <p class="name" @click="$router.push({name: 'User', params: { user_id: `${item.follerd_id}` }})">{{item.focus.nickname}}</p>
         <p>{{'数据库未设置字段---'}}TA很懒，还没有添加简介</p>
       </div>
       <div class="right" >
          <el-button type="primary" size="small" @click="clickBtn(item)">{{!item.friends ? '已关注' : '互相关注'}}</el-button>
       </div>
     </div>
  </div>
</template>

<script>
import { deleteUserFollowings } from '@/api/user'
export default {
  name: 'Focus',
  props: {
    data: Object,
    required: true,
    default: function () {
      return {}
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 粉丝用户按钮
    async clickBtn (item) {
      await deleteUserFollowings(item.follerd_id)
      this.$message.success('已取消关注该用户')
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="scss" scoped>
.left,.name{cursor:pointer;  }
.focus{
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  width: 100%;
  display:flex;
  .left{
  width: 70px;
  }
  .center{
  margin:10px 30px 0 20px;
  // width: 526px;
  width: 100%;
  p{
  margin:0;
  }
   p:nth-child(1){
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
   }
   p:nth-child(2){
   font-size: 13px;
white-space: nowrap;
 text-overflow: ellipsis;
overflow: hidden; //隐藏文字
   }
  }
  .right{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  }
}

</style>
